<template>
  <div class="page-warp h-f bg-grey-200">

    <div class="header-warp">
      <div class="sticky-headers sticky bg-white">
        <div class="search">
          <div class="col">
            <search-input v-model="queryParams.keyword" @search="searchList" :more="false"
                          placeholder="请输入盘点单号"

            />
          </div>
        </div>
      </div>
    </div>

    <div class="m-content">
      <div class="m-warp ">

        <template v-for="item in list.rows" :key="item['pso_id']">
          <collection-card
            :title-bg="false"
            prod
            :is-expand="true"
          >
            <template #title>
              <span>{{ item['ivoCode'] }}</span>
              <!--              <span style="top: 8px;position:relative;">-->
              <!--                <image class="image-icon-md ml-2"-->

              <!--                       src="@/assets/icons/png/merge.png" alt=""-->
              <!--                />-->
              <!--              </span>-->
            </template>

            <collection-card-cell :prod="false"
                                  :state-type="proStateMap"
                                  :state="-1"
                                  :footer="true"
                                  footer-align="right"
            >
              <ul class="text-list line-h-lg">
                <!--                <li class="li-item">-->
                <!--                  <span class="title">盘点单号：</span>-->

                <!--                </li>-->
                <li class="li-item">
                  <span class="title">盘点仓库：</span>
                  <span class="value">{{ item['bwaName'] }}</span>
                </li>
                <li class="li-item">
                  <span class="title">盘点部门：</span>
                  <span class="value">{{ item['ivoOrgName'] }}</span>
                </li>
                <li class="li-item">
                  <span class="title">盘点人员：</span>
                  <span class="value">{{ item['ivoPersonName'] }}</span>
                </li>
                <li class="li-item">
                  <span class="title">盘点日期：</span>
                  <span class="value">{{ item['ivoDate'] }}</span>
                </li>
<!--                <li class="li-item">-->
<!--                  <span class="title">库存预警天数：</span>-->
<!--                  <span class="value">{{ item['daysWarning'] }}</span>-->
<!--                </li>-->
<!--                <li class="li-item">-->
<!--                  <span class="title">库存天数预警：</span>-->
<!--                  <state-notifier-->
<!--                    :config="KEYS.WARN_STATE"-->
<!--                    :state="item['ifDaysWarn'] + ''"-->
<!--                  />-->
<!--                </li>-->
                <li class="li-item">
                  <span class="title">是否调账：</span>
                  <state-notifier
                    :config="KEYS.Y1N0"
                    :state="item['isAccount'] + ''"
                  />
                </li>
                <li class="li-item">
                  <span class="title">单据状态：</span>
                  <state-notifier
                    :config="KEYS.IIO_RECIPE_STATE"
                    :state="item['ivoState'] + ''"
                  />
                </li>
              </ul>

              <template #footer>
                <div class="prod-footer">
                  <div class="footer-btn">
                    <button-circle class="link-button" type="primary"
                                   @click="viewForm(item)">详情
                    </button-circle>
                    <button-circle class="link-button" type="danger" @click="deleteForm(item)"
                                   style="margin-left: 12px;"
                                   v-if="canDelete(item)"
                    >删除
                    </button-circle>
                    <button-circle class="link-button" type="primary" @click="editForm(item)"
                                   style="margin-left: 12px;"
                                   v-if="canDelete(item)"
                    >盘点
                    </button-circle>
                    <button-circle class="link-button" type="primary"
                                   @click="adjustForm(item)"
                                   style="margin-left: 12px;"
                                   v-if="adjustable(item)"
                    >调账
                    </button-circle>
                  </div>
                </div>
              </template>
            </collection-card-cell>
          </collection-card>
        </template>

        <LoadingFooter
          :data="list.rows"
          :total="list.total"
          :loading="loadingStore.ILOADING"
          @load="loadMore"
          :h-offset="44"
        />
      </div>

<!--      <div class="form-footer">-->
<!--        <div class="footer-warp">-->
<!--          <div class="footer__btn">-->
<!--            <div class="btn">-->
<!--              <button-->
<!--                class="uni-btn"-->
<!--                type="primary"-->
<!--                @click="additem(0)"-->
<!--                :disabled="loadingStore.ILOADING"-->
<!--                :loading="loadingStore.ILOADING"-->
<!--              >-->
<!--                新增-->
<!--              </button>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

    </div>

    <ConfirmModal
      v-model="dialog.del.show"
      :message="dialog.del.msg"
      @change="onDelete"
    />

    <uni-message-ex custom-nav />
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { debounce } from 'radash'
import { PageUtil } from '@/utils/PageUtil'
import { onLoad, onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'

import { usePageParamHook } from '../../material/common/PageParam'
import { useLoading } from '../../../../store/LoadingStore'
import CollectionCard from '../../../../components/CollectionCard.vue'
import CollectionCardCell from '../../../../components/CollectionCardCell.vue'
import LoadingFooter from '../../../../components/LoadingFooter.vue'
import SearchInput from '../../../../components/SearchInput.vue'
import { useStockResStore } from '../../../../store/StockResulting'
import StateNotifier from '../../../../components/StaticDictionary/StateNotifier.vue'
import { useStaticTypeDictionaries } from '../../../../components/StaticDictionary/StaticTypeDictionaries'
import ButtonCircle from '../../../../components/ButtonCircle.vue'
import ConfirmModal from '../../../../components/ConfirmModel/ConfirmModal.vue'
import UniMessageEx from '../../../../components/UniMessageEx.vue'
import { useMessage } from '../../../../store/MessageStore'
import { StringUtils } from '../../../../utils/StringUtils'


//#region Refs

//#endregion Refs

//-----------------------------------------------------------------

//#region Const
const proStateMap = {
  0: ''
}
//#endregion Const

//-----------------------------------------------------------------

//#region Use
const {
  hookP,
  setupPage,
  getButtonTitle
} = usePageParamHook()
const msgStore = useMessage()
const { KEYS } = useStaticTypeDictionaries()
const loadingStore = useLoading()
const stockResStore = useStockResStore()
//#endregion Use

//-----------------------------------------------------------------

//#region Data
const queryParams = reactive({
  limit: 1,
  size: 20
})

const list = reactive({
  rows: [],
  total: 0
})
//#endregion Data

//-----------------------------------------------------------------

//#region Method
const adjustable = function (e) {
  // const { isAccount,ivoState } = e || {}
  // return +isAccount === 0
  // 是否调账为否，单据状态为：已生效的，才显示调账按钮，否则按钮隐藏
  return e.ivoState == "1" && e.isAccount == "0"
}

const canDelete = function(item) {
  const { ivoState } = item || {}
  if (StringUtils.isEmptyOrNull(ivoState)) {
    return true
  }
  return [0].includes(+ivoState)
}

const searchList = function(e) {
  const {value = ""} = e || {}
  loadingStore.NEW_LIST()
  queryParams.limit = 1
  queryParams.ivoCode = value
  queryList()
}


const queryList = function() {
  debounceQuery()
}

const debounceQuery = debounce({ delay: 300 }, () => {
  loadingStore.SET_LOADING()

  stockResStore.getList({
    ...queryParams
  }).then((res) => {
    let {
      Rows = [], Total = 0
    } = res || {}
    if (loadingStore.isLoadMore(list.rows, Total)) {
      console.log('concat')
      list.rows = list.rows.concat(Rows)
    } else {
      console.log('new rows')
      list.rows = Rows
    }
    list.total = Total
    loadingStore.FINISH_ALL()
    uni.stopPullDownRefresh()
  })
})

const loadMore = function() {
  if (loadingStore.ILOADING) {
    return
  }
  const { total = 0, rows = [] } = list
  if (loadingStore.hasMore(rows, total)) {
    queryParams.limit += 1
    debounceQuery()
  }
}

const viewForm = function(item) {
  PageUtil.addEvent(
    'material-res-formview',
    () => {
      queryList()
    }, {
      route: '/pages/stocks/query/result/formview',
      params: {
        row: {
          ...item,
          __view: true
        }
      }
    }
  )
}

const dialog = reactive({
  del: {
    show: false,
    msg: '确定要删除吗?',
    row: {}
  }
})
const deleteForm = function(item) {
  dialog.del.show = true
  dialog.del.row = item
}

const onDelete = function(e) {
  if (!e) return
  const { ivoId: id } = dialog.del.row
  loadingStore.SET_LOADING()
  stockResStore.listDelete({
    ids: [id]
  }).then(res => {
    msgStore.success('操作成功')
    searchList()
  })
}

const additem = function(item) {
  PageUtil.addEvent(
    'resulting-edit-formview',
    () => {
      queryList()
    }, {
      route: '/pages/stocks/query/result/formview',
      params: {
        row: {

        }
      }
    }
  )
}

const editForm = function(item) {
  PageUtil.addEvent(
    'material-in-formview',
    () => {
      queryList()
    }, {
      route: '/pages/stocks/query/result/formview',
      params: {
        row: {
          ...item,
          __check:true
        }
      }
    }
  )
}

const adjustForm = function(item) {
  PageUtil.addEvent(
    'material-in-formview',
    () => {
      queryList()
    }, {
      route: '/pages/stocks/query/result/formview',
      params: {
        row: {
          ...item,
          __adjust:true
        }
      }
    }
  )
}
//#endregion Method

//-----------------------------------------------------------------

//#region Page Events
onLoad((params) => {
  let { row } = PageUtil.parseParam(params)

  loadingStore.NEW_LIST()
  queryList()
})

onShow(() => {
  searchList()
})

onPullDownRefresh(() => {
  searchList()
})

onReachBottom(() => {
  loadMore()
})
//#endregion Page Events
</script>

<style lang="scss" scoped>
@import "@/assets/PageCommon.scss";

.li-item {
  display: flex;

}

.page-warp {
  .header-warp {
    &:after {
      height: 75px;
    }
  }

  .m-content {
     background: #f2f2f2;
    .prod-footer {
      display: flex;
      align-items: center;
      justify-content: center;

      .footer-btn {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
